<template>
  <div class="zhu">
    <div class="shang">
      <van-nav-bar title="订单">
        <template #right class="biaobiao">
          <van-icon name="search" size="18"/>
          <van-icon name="chat-o" size="18" badge="9"/>
        </template>
      </van-nav-bar>
      <div class="shang_one">
        <div class="recently">
          <span style="font-size: 24px;font-weight: bold;">最近购买</span>
          <span style="color:#868688;font-size: 18px">查看更多商家<van-icon name="arrow"/></span>
        </div>
        <div class="weizhi">
          <div class="recently_mai" v-for="itmes in list" :key="itmes">
            <van-image
                width="90px"
                height="90px"
                fit="cover"
                radius="5px 5px 0 0"
                :src="itmes.dishes.dishesPhotoOrVideoUrl"
            />
            <div class="recently_xx">
              <span style="font-size: 16px;font-weight: bold">{{ itmes.dishes.dishesName }}</span>
              <span style="font-size: 12px;color:#868688">购买<span>{{ itmes.number }}</span>次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="xia">
      <van-tabs v-model:active="active">
        <van-tab title="全部订单">
          <div style="margin-bottom: 50px">
            <div class="OrderInfo" v-for="index in list" :key="index">
              <div class="OrderInfo_dian">
                <div>
                  <van-image
                      width="50px"
                      height="50px"
                      fit="cover"
                      radius="10px"
                      :src="index.shop.headPortrait"
                  />
                </div>
                <div class="ju">
                  <div class="dian_min">
                    <span>{{ index.shop.shopName}}<van-icon name="arrow"/></span>
                    <span>{{ index.states }}</span>
                  </div>
                  <div>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                    <van-tag plain type="danger">标签</van-tag>
                  </div>
                </div>
              </div>
              <div class="Order_nr">
                <div class="Order_tutu">
                  <van-image width="10s0" height="80" radius="10px" :src="index.dishes.dishesPhotoOrVideoUrl"/>
                  <span style="font-size: 14px;width: 150px;">
                    <span>{{ index.dishes.title }}</span>
                  </span>
                </div>
                <p class="pspan">
                  <span style="font-weight: bold">￥<span>{{ index.dishes.price }}</span></span>
                  <span style="font-size: 12px;color:#868688;">共<span>{{ index.number }}</span>件</span>
                </p>
              </div>
              <div class="an_niu">
                <van-button round size="small" >再来一单</van-button>
                <van-button round size="small" >评&ensp;价</van-button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待评价">内容 2</van-tab>
        <van-tab title="退款">内容 3</van-tab>
      </van-tabs>

    </div>
  </div>
</template>
<script>
import diantu from "../assets/pikaqiu.png"

export default {
  data() {
    return {
      list:[],
      active: "active",
      Diantu: diantu,
      purchase: [
        {dianming: "卤一嘴", count: 6, url: require("../assets/meimei.png")},
        {dianming: "吃香喝辣", count: 8, url: require("../assets/meimei.png")},
        {dianming: "卤一嘴", count: 6, url: require("../assets/meimei.png")},
        {dianming: "吃香喝辣", count: 8, url: require("../assets/meimei.png")},
        {dianming: "吃香喝辣", count: 8, url: require("../assets/meimei.png")},
      ],
      allOrders:[
        {dming:"书亦烧仙草",state:"",nr:"香辣手撕鸡+加配菜+饮料",jiage:10.8,count:1,shopurl:require("../assets/meimei.png"),dianpuurl:require("../assets/xiaomei.png")},
        {dming:"吃香喝辣",state:"",nr:"香辣手撕鸡+加配菜+饮料",jiage:15.8,count:2,shopurl:require("../assets/pikaqiu.png"),dianpuurl:require("../assets/xiaomei.png")},
        {dming:"吃香喝辣",state:"",nr:"香辣手撕鸡+加配菜+饮料",jiage:15.8,count:2,shopurl:require("../assets/pikaqiu.png"),dianpuurl:require("../assets/xiaomei.png")},
        {dming:"吃香喝辣",state:"",nr:"香辣手撕鸡+加配菜+饮料",jiage:15.8,count:2,shopurl:require("../assets/pikaqiu.png"),dianpuurl:require("../assets/xiaomei.png")},
      ]
    }
  },
  mounted() { //挂载之后执行的方法
    this.getOrder();
  },
  methods: {
    getOrder() {
      // let userId = this.$route.query.id;
      // console.log("userId=" + userId);
      this.$axios.get('/orders/orderlistById', {
        params: {
          userId: 2
        }
      })
          .then(res => {
            this.list = res.result.list;
            alert(res.list);
            // console.log("this.entity.dishesName="+this.entity.dishesName);
            console.log("this.list=" + res.list);
          }).catch(error => {
        console.log("error:" + error)
      })
    },
  }
}
</script>
<style>
.shang {
  height: 320px;
  background: linear-gradient(#ffcc33, #fddacf, #fedfe8);
  display: flex;
  flex-direction: column;

}

.van-nav-bar .van-icon {
  margin-left: 20px;
}

.shang .van-nav-bar {
  background: none;
  margin-top: 20px;
}
.shang  .van-nav-bar__content{
  height: 45px;
}
.shang_one {
  width: 350px;
  height: 210px;
  margin-top: 20px;
  background-color: white;
  border-radius: 10px;
  align-self: center;
}

.recently {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 20px 10px 0px 10px;
}

.recently_mai {
  width: 90px;
  height: 130px;
  border-radius: 10px;
  background-color: #e7e4e4;
  margin-left: 10px;
}

.weizhi {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  justify-content: space-between;
}
.weizhi .van-image__img{
  margin-left: 0;
}
.recently_xx {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xia .van-tab {
  justify-content: flex-start;
}

.xia .van-tabs__line {
  bottom: 15px;
  left: -33px;
  width: 15px;
  height: 7px;
  background: #ffcc33;
}

.xia .van-tab__text--ellipsis {
  font-size: 18px;
  font-weight: bold;
}

.OrderInfo {
  height: 215px;
  border-radius: 10px;
  border: 1px solid red;
  margin: 12px;
}

.OrderInfo_dian {
  height: 50px;
  margin: 10px;
  display: flex;
  flex-direction: row;

}

.dian_min {
  width: 280px;
  display: flex;
  justify-content: space-between;
}

.ju {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.Order_nr {
  margin: 0 10px 20px 10px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pspan{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Order_tutu{
  width: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.an_niu{
  display: flex;
  flex-direction: row-reverse;
  font-weight: bold;
}
.an_niu .van-button--round{
  border-radius: 10px;
  margin-right: 10px;
}
</style>